
import React, { useState, useEffect } from "react";
import styles from "./myQuestionAnswer.less"
import { Input, Button, Pagination, Modal } from 'antd';
import { DownOutlined, SearchOutlined } from '@ant-design/icons';
import { observer } from 'mobx-react-lite';
let xx = ""
import useStore from "@/context/useStore";
import { IMyReply, IProjectAnswerParams, IWenda } from "@/utils/students/projectAnswer";
import { deleteAnswer, getMyReply } from "@/services/modules/students/projectAnswer";
import classNames from "classnames";
import Editor from 'for-editor';
//类型标题
const genre = [{ name: "全部", type: "" },
{ name: "实训", type: "0" },
{ name: "答辩", type: "4" },
{ name: "面试", type: "1" },
{ name: "工作", type: "2" },
{ name: "其他", type: "3" },
];

const tabList = ["我的问题", "我的答案"]
const myQuestionAnswer: React.FC = (props) => {
    let { ProjectAnswer } = useStore()

    let [tabIndex, setTabIndex] = useState(0)
    //开启我要提问弹框
    let [answerId, setAnswerId] = useState("")
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        console.log(answerId, title);
        ProjectAnswer.UpdateMyReply({ answerId: answerId, questionValue: title })
        setTitle("")
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //查看全部内容
    let [lookAll, setLookAll] = useState(true)


    let [title, setTitle] = useState("")
    //问答数据列表的默认参数  pageNum=4&pageSize=10&questionTitle=  33
    let queryParams: IWenda = { pageNum: 1, pageSize: 10 };
    useEffect(() => {
        if (ProjectAnswer.pageNum) {
            queryParams = {
                ...queryParams,
                questionTitle: ProjectAnswer.questionTitle,
                pageNum: ProjectAnswer.pageNum
            }
        } else {
            queryParams = {
                ...queryParams,
                questionTitle: ProjectAnswer.questionTitle,
                pageNum: ProjectAnswer.pageNum
            }
        }
        //我的问题
        ProjectAnswer.getProjectAnswermyAskList1(queryParams)
        //我的答案
        ProjectAnswer.getProjectAnswermyAnswerList2(queryParams)
    }, [ProjectAnswer.questionTitle, ProjectAnswer.pageNum]);
    //我的问答

    let [itemObj, setItemObj] = useState<IMyReply>({} as IMyReply)

    useEffect(() => {
        getMyReply().then((ok: { data: React.SetStateAction<IMyReply>; }) => {
            setItemObj(ok.data)
        })
    }, [])
    return (
        <div className={styles.mainBox}>
            <div className={styles.main}>
                <div className={styles.main_title}>
                    问答 / 我的问答
                </div>
                <div className={styles.con}>
                    <div className={styles.main_main_BoxL}>
                        {/* 类型分类 */}
                        <div className={styles.genre}>
                            {
                                tabList.map((item, index) => {
                                    return <span key={index}
                                        onClick={() => { setTabIndex(index) }}
                                        className={tabIndex == index ? styles.active : ""}
                                    >{item}</span>
                                })
                            }
                        </div>
                        {/* 模糊搜索   仅看精品  教师认证*/}
                        <li className={styles.con_title}>
                            <div>
                                <Input placeholder="搜索问题"
                                    suffix={<SearchOutlined onClick={() => { ProjectAnswer.setQuestionTitle(ProjectAnswer.title) }} />}
                                    onChange={e => ProjectAnswer.setTitle(e.target.value)} onKeyDown={e => {
                                        if (e.keyCode === 13) {
                                            ProjectAnswer.setQuestionTitle(ProjectAnswer.title)
                                        }
                                    }} />
                            </div>
                        </li>
                        <ul className={styles.uls}>
                            {
                                (tabIndex === 0 ? ProjectAnswer.ProjectAnswermyAskList1 : ProjectAnswer.ProjectAnswermyAskList2).map((item) => {
                                    return <div className={styles.divs} key={item.answerId}>
                                        {/* 左侧盒子 */}
                                        <div className={styles.divsBoxL}>
                                            {/* 标题 评论消息  实训类型 */}
                                            <div className={styles.divs_top}>
                                                <div className={styles.divs_top_left}>
                                                    <span>{item.qUserName}</span>
                                                    <span>{item.replyTime}</span>
                                                    <span>实训类型:{genre.map(item1 => {
                                                        if (item1.type == item.typeNum) {
                                                            return <span className={styles.typeNum} key={item1.type}>{item1.name}</span>
                                                        }
                                                    })}</span>
                                                </div>
                                                {/* questionContent: "杀杀杀"
                                                questionTitle: "杀杀杀" */}
                                                <div className={styles.divs_top_right}>
                                                    <img src={xx} alt="" /><span>{item.answerCount}</span>
                                                </div>
                                            </div>
                                            {/* 标题内容 */}
                                            <div className={styles.divs_con}>
                                                <div className={styles.divs_question_title}>
                                                    <span>{item.quality ? <img src="http://111.203.59.61:8060/static/img/boutique.fc46be52.svg" alt="" /> : ""}</span>
                                                    <span>{item.authentication ? <img src="http://111.203.59.61:8060/static/img/authentication.c814dd7c.svg" alt="" /> : ""}</span>
                                                    <span>{item.questionTitle}</span>
                                                </div>
                                                <div className={styles.divs_con_children}>
                                                    {
                                                        item.replyContext
                                                    }
                                                    <div className={lookAll ? styles.questionContentActive : styles.questionContent}>
                                                        {item.questionContent}
                                                    </div>
                                                    <div className={styles.lookAll}><span onClick={() => {
                                                        setLookAll(lookAll ? false : true)
                                                    }}>查看全部</span><DownOutlined /></div>
                                                </div>
                                            </div>
                                            {/* 标题标签 */}
                                            {
                                                tabIndex===0?<div className={styles.divs_comment}>{item.labels.map((item1, index1) => {
                                                    return <span key={index1}>{item1}</span>
                                                })}</div>:null
                                            }
                                            
                                        </div>
                                        <div className={styles.divsBoxR}>
                                            {/* 修改编辑 */}
                                            <img src="http://111.203.59.61:8060/static/img/edit.cb3644a6.svg" alt="" onClick={() => {
                                                showModal(); setAnswerId(item.answerId)
                                            }} />
                                            {/* 修改弹框 */}
                                            <Modal visible={isModalVisible} className={styles.ant_modal}
                                                onOk={handleOk}
                                                onCancel={handleCancel}
                                                bodyStyle={{ width: 550 }}
                                                width={550}
                                                style={{ height: 300 }}
                                                maskStyle={{ background: "rgba(51 51 51 / 10%)" }}
                                                title="编辑"
                                                okText="保存"
                                                cancelText="取消"
                                            >
                                                <Editor placeholder="开始编辑..."
                                                    style={{ height: 300 }}
                                                    onChange={(value) => { setTitle(value) }} />
                                            </Modal>
                                            {/* 删除 */}
                                            <img src="http://111.203.59.61:8060/static/img/delete.5582e2ce.svg" alt=""
                                                onClick={() => {
                                                    setAnswerId(item.answerId)
                                                    ProjectAnswer.deleteAnswer({ answerId: answerId })
                                                }} />
                                        </div>
                                    </div>
                                })
                            }
                            {/* 分页盒子 */}
                            <div className={styles.page}>
                                <Pagination
                                    defaultCurrent={1}
                                    onChange={(e) => { ProjectAnswer.setPAgeNum(e) }}
                                    total={tabIndex===0?ProjectAnswer.ProjectAnswermyAskListLen1:ProjectAnswer.ProjectAnswermyAskListLen2} size="default"
                                    showSizeChanger showQuickJumper pageSize={10} pageSizeOptions={["10"]} />
                            </div>
                        </ul>
                    </div>
                    <div className={styles.main_main_BoxR}>
                        {/* 我的回答 */}
                        <div>
                            <div>
                                <h1>
                                    我的问答
                                </h1>
                                <div>
                                    <img src="" alt="" /><span></span>
                                </div>
                                <div>
                                    <div className={classNames(styles.wen, styles.wenda)}>问</div>
                                    <div>
                                        提问了
                                        <span className={styles.num}>{itemObj.numberQuestions}</span>
                                        个问题
                                        <span className={styles.num}>{itemObj.numberReplies}</span>个人进行了回答
                                    </div>
                                </div>
                                <div>
                                    <div className={classNames(styles.da, styles.wenda)}>答</div>
                                    <div>回答了<span className={styles.num}>{itemObj.replyCount}</span>个问题</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    )
}
export default observer(myQuestionAnswer)
